<template>
    <div>
        <!-- 用户信息列表 -->
        <el-container>
            <!-- 1-1 页面头部信息 -->
            <el-header class="header-all">
                <!-- 1-1-1 查询区域 -->
                <div style="display: inline">
                    资产分类：
                    <el-select v-model="value" placeholder="请选择" class="sex-select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="value" placeholder="请选择" class="sex-select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    &nbsp;资产名称：
                    <el-input v-model="input" style="width: 160px"></el-input>
                    &nbsp;资产编号：
                    <el-input v-model="input" style="width: 160px"></el-input>
                    包装类型：<el-select v-model="value" placeholder="请选择" class="sex-select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>

                    </el-select>
                    <el-button type="primary" icon="el-icon-search" class="but-select" @click="query()">搜索</el-button>
                </div>
                <!-- 1-1-2 功能区域 -->
                <div class="div-header-but">
                    <el-button type="primary" class="but-select" icon="el-icon-plus" style="margin-right: 17px;"
                        @click="add('plus')" plain>新增</el-button>
                </div>
            </el-header>
            <!-- 列表区域 -->
            <el-main>
                <el-table :data="userList" v-loading="loading" ref="userList" stripe>
                    <el-table-column prop="assetscode" width="160px" label="资产编号" align="center"></el-table-column>
                    <el-table-column prop="assetstype" width="150px" label="资产类型" align="center"></el-table-column>
                    <el-table-column prop="createdate" width="140px" label="创建时间" align="center"></el-table-column>
                    <el-table-column prop="createuser" width="150px" label="创建者" align="center"></el-table-column>
                    <el-table-column prop="financetype" width="170px" label="金融类型" align="center"></el-table-column>
                    <el-table-column prop="id" width="170px" label="ID" align="center"></el-table-column>
                    <el-table-column prop="namecn" width="170px" label="公司流动资金" align="center"></el-table-column>
                    <el-table-column prop="organization" width="170px" label="组织者" align="center"></el-table-column>
                    <el-table-column prop="refbankno" width="170px" label="卡号" align="center"></el-table-column>
                    <el-table-column width="260px" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" plain @click="upd(scope.$index, scope.row)"><i class="el-icon-s-order"></i>&nbsp;记录</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: "finance",
    data() {
        return {
            options: [{
                value: '0',
                label: '男'
            }, {
                value: '1',
                label: '女'
            }],
            dialogVisible: false,
            value: '',
            funame: "",
            userList: [],
            user: {
                "assetscode": "",
                "namecn": "",
                "normalbrand": "",
                "normalmodel": "",
                "supplier": "",
                "packagetype": "",
            },
            showTable: [],
            loading: false,
        }
    },
    created() {
        this.getJsonUser()
        this.getJsonRole()
    },
    methods: {
        getJsonUser() {
            console.log("进入加载列表数据方法")
            var rul = "http://121.37.241.58:8883/logic/assets/finance/list"
            this.$axios.post(rul).then(re => {
                console.log(re.data)
                this.userList = re.data;
            });
        },
        getJsonRole() {
            // console.log("进入加载下拉框数据方法")
            // var rul = "http://121.37.241.58:8883/logic/baseInfo/sysUser/roleList"
            // this.$axios.get(rul).then(re => {
            //     console.log("-------")
            //     console.log(re.data)
            //     this.myRole = re.data
            //     this.myRole.push({ role: "全部" })
            // });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 搜索
        query() {
            const queryUserList = [];
            let searchArr = this.showTable;
            // 如果用户姓名为空, 性别不为空
            if ((this.funame == null || this.funame == "") && (this.value != null && this.value != "")) {
                if (this.value == "0") {
                    this.value = "男"
                } else if (this.value == "1") {
                    this.value = "女"
                }
                searchArr.forEach((e) => {
                    console.log(e.sex);
                    if (e.sex == this.value) {
                        queryUserList.push(e);
                    }
                });
            }
            // 如果用户姓名不为空, 性别为空
            if ((this.funame != null || this.funame != "") && this.value == "") {
                if (this.value == "0") {
                    this.value = "男"
                } else if (this.value == "1") {
                    this.value = "女"
                }
                console.log(this.funame);
                searchArr.forEach((e) => {
                    if (e.username == this.funame) {
                        queryUserList.push(e);
                    }
                });
            }

            // 如果用户姓名不为空, 性别不为空
            if ((this.funame != null || this.funame != "") && this.value != "") {
                if (this.value == "0") {
                    this.value = "男"
                } else if (this.value == "1") {
                    this.value = "女"
                }
                searchArr.forEach((e) => {
                    if (e.username === this.funame && e.sex === this.value) {
                        queryUserList.push(e);
                    }
                });
            }
            // 如果用户姓名为空, 性别为空
            if ((this.funame == null || this.funame == "") && this.value == "") {
                this.userList.forEach((e) => {
                    queryUserList.push(e);
                });
            }
            this.userList = queryUserList;
        },
        // 新增
        add(string) {
            // 表示新增的按钮点击
            if (string === "plus") {
                this.dialogVisible = true;
                this.dialogVisible = "";
                this.user.username = "";
                this.user.idcard = "";
                this.user.sex = "";
                this.user.account = "";
                this.user.rxTime = "";
                this.user.rdTime = "";
                // 表示确定的按钮点击
            } else if (string === "sure") {
                // if ()
                this.dialogVisible = false;
                if (this.user.sex == 0) {
                    this.user.sex = "男"
                } else {
                    this.user.sex = "女"
                }
                this.userList.push(this.user);
            }
        },
        // 修改
        upd(index, row) {
            this.dialogVisible = true;
            this.title = "修改用户";
            this.user.username = row.username;
            this.user.idcard = row.idcard;
            this.user.sex = row.sex;
            this.user.account = row.account;
            this.user.rxTime = row.rxTime;
            this.user.rdTime = row.rdTime;
            var user = Object.assign({}, row);
        },
        // 删除
        del(index, row) {
            this.$confirm('确定删除' + row.username + '吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error',
            }).then(() => {
                this.userList.splice(index, 1);
            });
        },
        // 取消
        cancel() {
            this.dialogVisible = false;
        },

    },
    watch: {
        value(item1, item2) {
            if (item1 == "") {
                this.userList = this.showTable;
            }
            console.log("监听");
        },
    },
    mounted() {
        this.showTable = this.userList;
    },

}
</script>

<!-- 1-1-1 开始对应每个控件及页面的样式进行绘制 -->
<style>
.input-name {
    width: 200px;
    margin-top: 20px;
    margin-left: 20px;
    padding: 0px;
    size: mini;
}

.but-select {
    margin-left: 10px;
}

.div-header-but {
    margin-left: 5px;
    margin-right: 20px;
    display: inline;
}

.header-all {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sex-select {
    margin-left: 5px;
    width: 90px;
}
</style>